<template>
    <div v-if="props.tags && props.tags.length > 0" class="zw-el-tags">
        <span v-for="(item, index) in props.tags" :key="index">
            <el-tooltip effect="dark" placement="top" popper-class="tool-tip" :content="getTagsTips(item)">
                <el-tag :class="`${item.wx_tagid ? '' : 'active'}`">{{ item.name }}</el-tag>
            </el-tooltip>
        </span>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps({
    tags: Object
});
const getTagsTips = (item: any) => {
    return item.group_name ? `${item.group_name}/${item.name}` : `${item.name}`;
};
</script>

<style lang="scss" scoped>
.zw-el-tags {
    .el-tag {
        &.active {
            border: 1px solid #ffc69e;
            color: #ff6b00;
        }
    }
}

.tool-tip {
    width: 80px;
}
</style>
